<template>

	<view class="navBar">
		<view class="">

		</view>
		<view class="navBarTop">
			<view class="left" @tap="back">
				<image :src="props.leftIcon || '/static/img/index/24.png'" mode="widthFix"></image>
			</view>
			{{props.title}}
			<view class="center">
				<slot name="center"></slot>
			</view>
			<view class="right">
				<slot name="right"></slot>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	type PropsType = {
		title : string,
		leftIcon:string
	}

	const props = withDefaults(defineProps<PropsType>(), {
		title: '',
		leftIcon:''
	})
	const back=()=>{
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
.navBar{
	width: 100%;
	>view:nth-of-type(1){
		height: var(--status-bar-height);
	}
}
.navBarTop{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	height: 88rpx;
	// margin-top: 28rpx;
	padding-top: 28rpx;
	color: #333333;
	background: #fff;
	z-index: 9;
	.left{
		position: absolute;
		left: 32rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		image{
			width: 36rpx;
		}
	}
	.right{
		display: flex;
		align-items: center;
		height: 88rpx;
		position: absolute;
		right: 32rpx;
	}
}
</style>